<template>
  <div class="container">
    <v-warningToolBar
      :fullPath="postData.opera"
      :tableColumns="tableColumns"
      @changeLie="getChangeLie"
      @getSearchIPArr="getToolBarSearchIPArr"
      @getSearchIP="getToolBarSearchIP"
      @selectLevel="getSelectLevel"
      @selectNodeType="getselectNodeType"
      @sureDialogOpen="sureDialogOpen"
      @inquire="getTableData"
      :tableData="tableDataFn"
      :tableDataFields="tableDataFieldsFn"
    >
    </v-warningToolBar>
    <div class="toHome" @click="toHome">
      <div><i class="el-icon-arrow-left"></i>返回监控总页</div>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableDataFn"
      border
      stripe
      
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :sortable="item.sortable"
          :label="item.label"
          :width="item.width"
          v-if="item.isShow"
          :key="item.prop"
          align="center"
        >
          <template v-slot="scope">
            <template v-if="item.format == 'level'">
              <div style="text-align: center">
                <el-tag
                  :type="scope.row.levelType"
                  disable-transitions
                  effect="dark"
                >
                  {{ scope.row[item.prop] }}
                </el-tag>
              </div>
            </template>
            <template v-else-if="item.format == 'action'">
              <div style="text-align: center">
                <el-button
                  type="info"
                  size="medium"
                  plain
                  @click="dialogVisible = true"
                  >查看</el-button
                >
              </div>
            </template>
            <template v-else>
              <div>
                {{ scope.row[item.prop] }}
              </div>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <v-pagination
      :dataTotal="postData.dataTotal"
      :curPage="postData.curPage"
      :pageSize="postData.pageSize"
      @getCurPage="getPaginationCurPage"
      @getPageSize="getPaginationPageSize"
    >
    </v-pagination>
    <v-Dialog
      :dialogVisible="dialogVisible"
      @dialogClose="dialogClose"
      :dialogData="dialogData"
    ></v-Dialog>
    <v-SureWarningdialog
      :multipleSelection="multipleSelection"
      :sureWarningdialogVisible="sureWarningdialogVisible"
      @sureDialogClose="sureDialogClose"
    ></v-SureWarningdialog>
  </div>
</template>

<script>
import { getWarningFault } from "@/api/index.js";
import bus from "common/bus.js";
import vPagination from "common/Pagination.vue";
import tableColumns from "./WarningTableColumns.js";
import vWarningToolBar from "./WarningToolBarFault.vue";
import vDialog from "./solveDialog";
import moment from "moment";
import vSureWarningdialog from "./sureWarningDialog.vue";

export default {
  name: "warningPanel",
  components: {
    vPagination,
    vWarningToolBar,
    vDialog,
    vSureWarningdialog,
  },
  data() {
    return {
      postData: {
        opera: "alertlist",
        curPage: 1,
        pageSize: 20,
        dataTotal: 0,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {
          ip: "",
          ALERT_LEVEL: "",
          os_type: "",

          // "monid": "9B86A82E27A3473F9D0F1DF46C9A6790",
        },
      },
      tableData: [],
      dataTotal: 0,
      tableColumns: tableColumns,
      SearchIPArr: [],
      searchJson: {},
      SearchIP: "",
      selectLevel: this.$route.params.level ? this.$route.params.level : "",
      selectNodeType: this.$route.params.nodeType
        ? this.$route.params.nodeType
        : "alertlist",
      handLevel: "",
      loading: true,
      dialogVisible: false,
      dialogData: "",
      multipleSelection: [],
      sureWarningdialogVisible: false,
    };
  },
  created() {
    this.initGetTableData();
  },
  computed: {
    tableDataFn() {
     return this.tableData.filter((item) => {
        switch (item.ALERT_LEVEL) {
          // case "1":
          //   item.ALERT_LEVEL = "提醒";
          //   item.levelType = "info";
          //   break;
          case "2":
            item.ALERT_LEVEL = "普通";
            item.levelType = "warning";
            break;
          case "3":
            item.ALERT_LEVEL = "紧急";
            item.levelType = "danger";
            break;

          default:
            break;
        }
        return item.IP.includes(this.postData.filters.ip);
      });

     
    },
    tableDataFieldsFn() {
      let _jsonfields = {};
      this.tableColumns.filter((item) => {
        if (item.isShow) {
          _jsonfields[item.label] = item.prop;
        }
      });

      return _jsonfields;
    },
  },
  methods: {
    initGetTableData() {
      this.selectLevel == ""
        ? this.$set(this.postData.filters, "ALERT_LEVEL", "3")
        : this.$set(this.postData.filters, "ALERT_LEVEL", this.selectLevel);

      if (this.selectNodeType != "alertlist") {
        this.postData.opera = this.selectNodeType;
      }
      this.getTableData();
    },
    getTableData() {
      this.loading = true;

      if ("netalertlist" == this.selectNodeType) {
        this.$set(this.postData.filters, "os_type", "Network");
      } else if ("osalertlist" == this.selectNodeType) {
        this.$set(this.postData.filters, "os_type", "OS");
      } else if ("oraclealertlist" == this.selectNodeType) {
        this.$set(this.postData.filters, "os_type", "Oracle");
      } else if ("mysqlalertlist" == this.selectNodeType) {
        this.$set(this.postData.filters, "os_type", "Mysql");
      } else if ("sqlserveralertlist" == this.selectNodeType) {
        this.$set(this.postData.filters, "os_type", "SQLServer");
      } else {
        this.$set(this.postData.filters, "os_type", "Oracle");
      }

      getWarningFault({
        type: this.postData.filters.os_type,
        alertLevel: this.postData.filters.ALERT_LEVEL,
        pageNum: this.postData.curPage,
        pageSize: this.postData.pageSize,
      }).then(async (res) => {
          let resultData = Object.values(res)[0] || [];

          let mapData = await resultData.map((item) => {
            let os_type = "";

            let TYPE = Object.hasOwnProperty.call(item, "dbtype")
              ? item.dbtype
              : item.osType;

            switch (TYPE) {
              case "Oracle":
                os_type = "Oracle";
                break;
              case "SQLServer":
                os_type = "SQLServer";
                break;
              case "Mysql":
                os_type = "Mysql";
                break;
              case "Linux":
              case "Windows":
              case "AIX":
                os_type = "OS";
                break;
              case "Network":
                os_type = "Network";
                break;
              default:
                os_type = "";
            }
           
            return {
              IP: item.ip,
              MONID: item.monid,
              SYSTEMNAME: TYPE,
              ALERT_LEVEL: String(item.alertLevel),
              INFOTYPE: item.infotype,
              ALERTINFO: item.alertinfo,
              RECORD_TIME: moment(item.recordTime).format(
                "YYYY-MM-DD HH:mm:ss"
              ),
              MON_OBJECT: item.monObject,
              OS_TYPE: os_type,
              SERVICESNAME: item.servicesname,
              systemname: item.systemname==null?'无信息':item.systemname,
            };
          });

          this.postData.dataTotal = Number(Object.keys(res)[0]);
          this.tableData = mapData;
          this.loading = false;
        }).catch((_) => {
          
        }).finally(() => {
          this.$message.success('查询成功')
          this.loading = false;
        });
    },
    getPaginationCurPage(val) {
      this.postData.curPage = val;

      this.getTableData();
    },
    getPaginationPageSize(val) {
      // 分页大小改变之后，重置当前页码为 1
      this.postData.curPage = 1;
      this.postData.pageSize = val;

      this.getTableData();
    },
    getToolBarSearchIP(str) {
      // 获取搜索IP关键字
      this.SearchIP = str;
      this.postData.curPage = 1;
      this.SearchIP == ""
        ? this.$set(this.postData.filters, "ip", "")
        : this.$set(this.postData.filters, "ip", this.SearchIP);

      // this.getTableData();
    },
    // 未实现
    getToolBarSearchIPArr(arr) {
      // 获取搜索IP关键字
      // this.SearchIPArr = arr;
      // this.postData.curPage = 1;
      // if (this.SearchIPArr.length > 0) {
      //     this.postData.filters['ip'] = this.SearchIPArr;
      // } else {
      //     this.postData.filters['ip'] = [];
      // }
      // this.getTableData();
    },
    getSelectLevel(num) {
      // 获取选择级别关键字
      this.selectLevel = num;
      this.postData.curPage = 1;
      this.selectLevel == ""
        ? this.$set(this.postData.filters, "ALERT_LEVEL", "3")
        : this.$set(this.postData.filters, "ALERT_LEVEL", this.selectLevel);

      // this.getTableData();
    },
    getselectNodeType(nodeType) {
      this.selectNodeType = nodeType;
      this.postData.opera = this.selectNodeType;

      // this.getTableData();
    },
    getChangeLie(val) {
      // 遍历表格列
      this.tableColumns.map((item, index) => {
        // 列的显示隐藏状态改变
        item.isShow = val.includes(item.label);
      });
    },
    dialogClose() {
      (this.dialogVisible = false), (this.dialogData = "");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    sureDialogClose() {
      this.multipleSelection = [];
      this.sureWarningdialogVisible = false;
      // this.getTableData();
    },
    sureDialogOpen() {
      if (this.multipleSelection.length < 1) {
        this.$message.error("请选择告警");
      } else {
        this.sureWarningdialogVisible = true;
      }
    },
    toHome(){
      this.$router.push({
        name:'dashBoardMainPage'
      })
    }
  },
  watch: {},
};
</script> 

<style scoped>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
.el-button--mini,
.el-button--small {
  font-size: 16px;
}
.toHome {
  background: rgb(2, 16, 51);
  color: #fff;
  margin-bottom: 15px;
  display: grid;
  justify-content: center;
  align-content: center;
 height: 40px;
 width: 150px;
 border-radius:5px;
  cursor:pointer;
  box-shadow: 0px 0px 20px #7f8c8d;
}
.toHome:hover{
  transform: scale(102%);
  opacity: 0.8;
}
</style>